<template>
    <div class="card-box">
        <el-card class="box-card">
            <div class="head-title">
                <div class="title">
                    <span>平台总投放量统计</span>
                </div>
                <div class="action">
                    <a href="#/platefrom-manager">平台管理</a>
                </div>
            </div>
            <div class="data-context">
                <el-row>
                    <el-col :span="12">
                        <div class="primary-count-box">
                            <div class="primary-count-title">
                                <h3>{{ plateNuminfo.primaryTitle }}</h3>
                            </div>
                            <div class="primary-count-num">{{ plateNuminfo.primaryNum }}</div>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div class="secondary-count-box">
                            <h3>{{ plateNuminfo.secondaryTitle }}</h3>
                            <div class="secondary-count-num">{{ plateNuminfo.secondaryNum }}</div>
                        </div>
                    </el-col>
                </el-row>
            </div>
            <div class="data-table">
                <el-table :data="tableData" style="width: 100%">
                    <el-table-column prop="platform" label="平台" width="auto">
                    </el-table-column>
                    <el-table-column prop="count" label="投放数" width="auto">
                    </el-table-column>
                </el-table>
            </div>
        </el-card>
    </div>
</template>
<style scoped>
.card-box {
    width: 60vh;
    height: 75vh;
}

.box-card {
    height: 100%;
}

.head-title {
    display: flex;
    justify-content: space-between;
}

.head-title .action a {
    color: #0080ff;
    text-decoration: none;
    line-height: 22px;
    cursor: pointer;
    -webkit-transition: all .3s;
    transition: all .3s;
}
</style>
<script>
export default {
    props: {
        plateNuminfo: {
            primaryTitle: "平台数",
            primaryNum: 131400,
            secondaryTitle: "投放数",
            secondaryNum: 1254511
        },
        tableData: {
            type: Array,
            default: () => {
                return [{
                    platform: "平台1",
                    count: 12345
                }, {
                    platform: "平台2",
                    count: 12345
                }
                ]
            }
        }
    },
    methods:{

    }

}
</script>